<template>
  <div class="social-wrapper">
    <el-row>
      <el-col>
        <div class="grid-content bg-purple-light">
          <el-button
            type="primary"
            size="small"
            @click="openAddPermissionDialog"
          >
            添加权限
          </el-button>
        </div>
      </el-col>
    </el-row>
    <div class="table-wrapper">
      <!-- 中间表格部分 -->
      <custom-table
        :data="permissionList"
        :columns="columns"
        :current-page.sync="pageInfo.page"
        :page-size.sync="pageInfo.pageSize"
        :total="permissionList.total"
        @update:currentPage="onPageChange"
        @update:pageSize="onPageSizeChange"
      >
        <template v-slot="{ row, col }">
          <template v-if="col.prop === 'op'">
            <el-button
              v-if="row.pid === '0'"
              type="text"
              size="mini"
              @click="openAddSonPermissionDialog(row.id)"
            >
              添加
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="openEditPermissionDialog(row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="onDelete(row.id)"
            >
              删除
            </el-button>
          </template>
        </template>
      </custom-table>
    </div>
    <!-- 添加权限对话框 -->
    <el-dialog
      title="新增权限"
      :visible.sync="addVisible"
      destroy-on-close
      center
    >
      <el-form :model="formData.add" :rules="addRules">
        <el-form-item
          class="role-name"
          label="权限名称"
          :label-width="formCompanyLabelWidth"
          prop="name"
        >
          <el-input v-model="formData.add.name" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="权限标识"
          :label-width="formCompanyLabelWidth"
          prop="code"
        >
          <el-input v-model="formData.add.code" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="权限描述"
          :label-width="formCompanyLabelWidth"
        >
          <el-input
            v-model="formData.add.description"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="开启" :label-width="formCompanyLabelWidth">
          <el-switch v-model="switchValue" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onAddPermission">
          确定
        </el-button>
        <el-button @click="closeAddPermissionDialog"> 取消 </el-button>
      </div>
    </el-dialog>
    <!-- 编辑权限对话框 -->
    <el-dialog
      title="编辑权限"
      :visible.sync="editVisible"
      destroy-on-close
      center
    >
      <el-form :model="formData.edit" :rules="addRules">
        <el-form-item
          class="role-name"
          label="权限名称"
          :label-width="formCompanyLabelWidth"
          prop="name"
        >
          <el-input v-model="formData.edit.name" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="权限标识"
          :label-width="formCompanyLabelWidth"
          prop="code"
        >
          <el-input v-model="formData.edit.code" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="权限描述"
          :label-width="formCompanyLabelWidth"
        >
          <el-input
            v-model="formData.edit.description"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="开启" :label-width="formCompanyLabelWidth">
          <el-switch v-model="switchValue" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onEditPermission()">
          确定
        </el-button>
        <el-button @click="closeEditPermissionDialog"> 取消 </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import * as constants from './constants.js'
import * as persmissionsManagement from '@/api/permissions-management'
import { mapState, mapActions } from 'vuex'
function getCheckFunc(field) {
  return function(rule, value, callback) {
    if (!value) {
      callback(
        new Error(
          this.$t('permissionsManagement.dialogTip.add.' + field)
        )
      )
    } else {
      callback()
    }
  }
}
export default {
  data() {
    return {
      // 正在编辑的id
      editingId: -1,
      switchValue: false,
      pageInfo: {
        page: 1,
        pageSize: 10
      },
      // 表格组件传参
      currentPage: 1,
      pageSize: 10,
      columns: constants.COLUMNS_CONF,
      addVisible: false,
      editVisible: false,
      formCompanyLabelWidth: '140px',
      formData: constants.FORM_DATA,
      // 新增的验证规则
      addRules: {
        name: [
          {
            required: true,
            trigger: 'change',
            validator: getCheckFunc('name').bind(this)
          }
        ],
        code: [
          {
            required: true,
            trigger: 'change',
            validator: getCheckFunc('code').bind(this)
          }
        ]
      }
    }
  },
  computed: {
    ...mapState('company-setting', ['permissionList'])
  },
  methods: {
    ...mapActions('company-setting', ['updatePermissionList']),
    // 分页切换
    onPageChange(currentPage) {
      this.updatePermissionList({
        page: currentPage,
        pageSize: this.pageInfo.pageSize
      })
    },
    // 页数切换
    onPageSizeChange(pageSize) {
      this.updatePermissionList({
        page: 1,
        pageSize: pageSize
      })
    },
    // 打开编辑权限弹出框
    openEditPermissionDialog(rowData) {
      // 记录id
      this.editingId = rowData.id
      // 打开
      this.editVisible = true
      // 反显
      this.formData.edit.name = rowData.name
      this.formData.edit.code = rowData.code
      this.formData.edit.description = rowData.description
    },
    // 编辑权限
    async onEditPermission() {
      const res = await persmissionsManagement.editPermission({
        id: this.editingId,
        description: this.formData.edit.description,
        name: this.formData.edit.name,
        code: this.formData.edit.code
      })
      this.$message({
        message: res.message,
        type: res.success ? 'success' : 'error'
      })
      if (res.success) {
        this.editVisible = false
        // 刷新权限列表
        this.getPermissionList()
      }
    },
    // 关闭编辑权限弹出框
    closeEditPermissionDialog() {
      this.editVisible = false
    },
    // 打开添加子权限对话框
    openAddSonPermissionDialog(id) {
      this.openAddPermissionDialog()
      this.formData.add.pid = id
    },
    // 打开添加弹出框
    openAddPermissionDialog() {
      this.addVisible = true
    },
    // 添加权限
    async onAddPermission() {
      const res = await persmissionsManagement.addPermissions({
        ...this.formData.add
      })
      this.$message({
        message: res.message,
        type: res.success ? 'success' : 'error'
      })
      if (res.success) {
        this.addVisible = false
        this.formData.add = {
          pid: 0
        }
        // 刷新权限列表
        this.getPermissionList()
      }
    },
    // 关闭添加权限弹窗
    closeAddPermissionDialog() {
      this.addVisible = false
    },
    getPermissionList() {
      this.updatePermissionList({
        page: this.pageInfo.page,
        pageSize: this.pageInfo.pageSize
      })
    },
    // 删除权限
    onDelete(id) {
      this.$confirm('确定删除此权限点吗', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        const res = await persmissionsManagement.delPermissions(id)
        this.$message({
          message: res.message,
          type: res.success ? 'success' : 'error'
        })
        if (res.success) {
          // 刷新权限列表
          this.getPermissionList()
        }
      })
    }
  },
  created() {
    // 获取所有权限点
    this.getPermissionList()
  }
}
</script>
<style lang="scss" scoped>
.social-wrapper {
	padding: 0 16px;
	box-sizing: border-box;
	.custom-class {
		width: 330px;
		background-color: #e6f7ff;
		color: #409eff;
	}
	.el-row {
		padding: 10px;
		box-sizing: border-box;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		margin-top: 20px;
		border: 1px solid #eee;
		border-radius: 4px;
	}
	.bg-purple-light {
		justify-content: flex-end;
	}
	.bg-purple-light,
	.bg-purple {
		display: flex;
		align-items: center;
	}
	.bg-purple-dark {
		align-items: flex-start;
	}
	.grid-content {
		min-height: 60px;
	}
	.change-width {
		width: 300px;
	}
	.table-wrapper {
		margin-top: 12px;
		padding: 16px;
		box-sizing: border-box;
		border: 1px solid #eee;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
}
</style>
